<template>
  <div style="height: 100vh">
    <Container>
      <div class="help_con">
        <p class="lg_title">急死了快帮我助力报销</p>
        <p class="sm_title">
          最高 <span class="red_text">666元！</span> 现金打款到账呢
        </p>
        <div class="help_btn" @click="helpNow">立即给好友助力</div>
        <div class="join_btn " @click="joinToo">我也要报销车票</div>
      </div>
    </Container>

    <!-- 助力成功弹框 -->
    <van-overlay :show="modalStatus.isHelp">
      <div class="help_success">
        <p class="success_title">助力成功</p>
        <p class="success_title title2">恭喜获得车票报销机会</p>
        <img :src="img7" alt="" class="success_image" />
        <div class="success_join" @click="joinNow">立即参加</div>
        <p class="success_info">任意车票可参与！100%有奖！最高666元！</p>
        <img :src="close01" alt="" class="help_close" @click="closeHelpModal" />
      </div>
    </van-overlay>

    <!-- 每日中奖名单 -->
    <van-popup
      v-model="modalStatus.isPrizeTab"
      position="bottom"
      :style="{ height: '55vh', background: 'transparent', overflow: 'hidden' }"
    >
      <div class="magic_line"></div>
      <PrizeTab />
    </van-popup>

    <!-- 活动规则 -->
    <van-overlay :show="modalStatus.isActRule">
      <div class="rule_container">
        <p class="lg_title">活动规则</p>
        <div class="rule_content">{{ ruleContent }}</div>
      </div>
      <div class="rule_close--btn">
        <img :src="close01" alt="" class="help_close" @click="closeActRule" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Overlay, Toast, Popup } from "vant";
import Container from "@/components/container";
import { close01, img7 } from "@/constant";
import { helpApi } from "@/service";
import { timeFormat, toWxWeb } from "@/utils/util";
import PrizeTab from "@/components/prizeTab";

let url = `/pages/web/web?url=${encodeURIComponent(
  `${location.origin}${location.pathname}#/?acte=help&isskey=1`
)}`;
export default {
  components: {
    Container,
    PrizeTab,
    [Overlay.name]: Overlay,
    [Popup.name]: Popup
  },
  data: function() {
    return {
      close01,
      img7,
      recordId: "",
      helpDate: ""
    };
  },
  computed: {
    modalStatus() {
      return this.$store.state.modalStatus;
    },
    app() {
      return this.$store.state.app;
    },
    ruleContent() {
      return this.app.ruleContent;
    }
  },
  created() {
    const {
      query: { r, t }
    } = this.$route;

    this.recordId = r;
    this.helpDate = timeFormat(Number(t), "YYYY-MM-DD");
  },
  methods: {
    closeActRule() {
      this.$store.commit("changeActRule", false);
    },
    joinNow() {
      setHmt("help", "winjoin");
      this.$store.commit("changeHelp", false);
      toWxWeb(url);
    },
    joinToo() {
      setHmt("help", "join");
      toWxWeb(url);
    },
    closeHelpModal() {
      this.$store.commit("changeHelp", false);
      toWxWeb(url);
    },
    async helpNow() {
      setHmt("help", "help");

      const { recordId, helpDate } = this;
      console.log(recordId, helpDate);

      try {
        const { success, msg } = await helpApi({
          recordId,
          helpDate
        });

        if (success === "1") {
          Toast(msg);
        } else {
          this.$store.commit("changeHelp", true);
        }
      } catch (e) {
        console.log(e);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/app.scss";

.help_con {
  background: #ffffff;
  border-radius: 30px;
  min-height: 621px;
  margin-top: 30px;
  text-align: center;
  @include flex_config(center, center, column);

  .lg_title {
    font-size: 49px;

    font-weight: bold;
    color: #2e2d2b;
  }
  .sm_title {
    font-size: 36px;

    font-weight: 500;
    color: #666666;
    margin-top: 40px;
    .red_text {
      color: rgba(249, 70, 47, 1);
      font-weight: 700;
    }
  }

  .help_btn {
    width: 454px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    background: linear-gradient(90deg, #fc6142, #f9412c);
    border-radius: 55px;
    font-size: 34px;

    margin-top: 75px;
    font-weight: 800;
    color: #ffffff;
  }

  .join_btn {
    width: 454px;
    height: 110px;
    line-height: 110px;
    text-align: center;

    background: #ffe9e1;
    border-radius: 55px;
    font-size: 34px;
    margin-top: 27px;
    font-weight: 800;
    color: #fa4730;
  }
}

.help_success {
  width: 575px;
  min-height: 650px;
  background: #ffffff;
  border-radius: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  @include flex_config(space-start, center, column);

  .success_title {
    font-size: 42px;
    font-weight: bold;
    color: #323232;
    margin-top: 46px;
  }
  .title2 {
    margin-top: 20px;
  }
  .success_image {
    width: 260px;
    margin-top: 15px;
  }

  .success_join {
    width: 312px;
    height: 87px;
    line-height: 87px;
    text-align: center;
    background: linear-gradient(90deg, #fd6444, #f8432e);
    border-radius: 55px;
    font-size: 35px;
    margin-top: 14px;

    font-weight: bold;
    color: #ffffff;
  }

  .success_info {
    font-size: 25px;
    font-weight: bold;
    color: #f84630;
    margin-top: 28px;
  }

  .help_close {
    position: absolute;
    bottom: -100px;
    width: 72px;
    left: 50%;
    transform: translate(-50%, 0);
  }
}

.rule_container {
  color: #fff;
  font-size: 29px;
  text-align: center;
  padding-top: 60px;
  height: 70vh;
  overflow: auto;

  .rule_content {
    text-align: left;
    font-size: 24px;
    line-height: 40px;
    font-weight: 400;
    padding: 0 24px;
    white-space: pre-line;
  }
}

.help_close {
  width: 72px;
  margin: 0 auto;
  left: 50%;
  transform: translate(-50%, 0);
}

.rule_close--btn {
  text-align: center;
  margin-top: 50px;
}

.magic_line {
  height: 21px;
  border-radius: 30px 30px 0 0;

  background: #f9fafc;
}
</style>
